<template>
	<div class="one">
		<div class="one_one">
			<div class="one_top">
				<p>
					<i class="iconfont">&#xe627;</i>酒店
					
				</p>
				<p>
					待消费 | <i class="iconfont">&#xe601;</i>
				</p>
			</div>
			<div class="one_bottom" v-for="item in list" :key="item.id">
				<p>{{item.txt1}}</p>
				<p>{{item.txt2}}</p>
				<p>{{item.txt3}}</p>
				<p>{{item.txt4}}</p>
				<p>{{item.price}}</p>
				<p>
					<button>再次预定</button>
				</p>
			</div>
		</div>
		<div class="one_two">
			<div class="one_top">
				<p>
					<i class="iconfont">&#xe627;</i>酒店
					
				</p>
				<p>
					<em>已完成 | </em><i class="iconfont">&#xe601;</i>
				</p>
			</div>
			<div class="one_bottom" v-for="item in listtwo" :key="item.id">
				<p>{{item.txt1}}</p>
				<p>{{item.txt2}}</p>
				<p>{{item.txt3}}</p>
				<p>{{item.txt4}}</p>
				<p>{{item.price}}</p>
				<p>
					<button>再次预定</button>
				</p>
			</div>
		</div>
		<h1>以显示全部订单</h1>
	</div>
</template>

<script>
	export default{
		name:'Order_data_one',
		data(){
			return{
				list:[
					{id:1,txt1:'利夫酒店',txt2:'新港中路76号',txt3:'2021-10.4 至 2021.10.5 1晚1间',txt4:'大床房',price:'￥468'},
				],
				listtwo:[
					{id:2,txt1:'艾利维亚酒店',txt2:'新华大道中(中华店)',txt3:'2020-6.4 至 2020.6.6 2晚1间',txt4:'特价房',price:'￥168'},
				]
			}
		}
	}
</script>

<style scoped>
	.one{
		width: 100%;
		overflow: hidden;
	}
	.one h1{
		width: 100%;
		text-align: center;
	}
	.one_one{
		margin: 0 auto;
		width: 95%;
		overflow: hidden;
		background-color: #f8f8f8;
		border-radius: 0.5rem;
		line-height: 3rem;
		padding-bottom: 1rem;
	}
	.one_one .one_top p:nth-child(1){
		width: 50%;
		float: left;
		text-indent: 1rem;
	}
	.one_one .one_top p:nth-child(2){
		width: 49%;
		float: right;
		text-align: right;
		padding-right: 1%;
	}
	.one_one .one_bottom{
		margin: 0 auto;
		width: 80%;
	}
	.one_one .one_bottom p{
		line-height: 2rem;
	}
	.one_one .one_bottom p:nth-child(5){
		text-align: right;
		width: 100%;
		float: right;
	}
	.one_one .one_bottom p:nth-child(6){
		float: right;
	}
	.one_one .one_bottom button{
		background-color: white;
		border-radius: 0.4rem;
		border: 0.1rem solid gray;
	}
	
	/* 后 */
	.one_two{
		margin: 0 auto;
		width: 95%;
		overflow: hidden;
		background-color: #f8f8f8;
		border-radius: 0.5rem;
		line-height: 3rem;
		padding-bottom: 1rem;
		margin-top: 1rem;
	}
	.one_two .one_top p:nth-child(1){
		width: 50%;
		float: left;
		text-indent: 1rem;
		color: gray;
	}
	.one_two .one_top em{
		color: gray;
	}
	.one_two .one_top p:nth-child(2){
		width: 49%;
		float: right;
		text-align: right;
		padding-right: 1%;
		
	}
	.one_two .one_bottom{
		margin: 0 auto;
		width: 80%;
	}
	.one_two .one_bottom p{
		line-height: 2rem;
		color: gray;
	}
	.one_two .one_bottom p:nth-child(5){
		text-align: right;
		width: 100%;
		float: right;
	}
	.one_two .one_bottom p:nth-child(6){
		float: right;
		
	}
	.one_two .one_bottom button{
		background-color: white;
		border-radius: 0.4rem;
		border: 0.1rem solid gray;
	}
</style>
